<template>
  <!-- 永续合约开仓页 -->
  <div id="cryptos">
    <div class="perpetual-open">
      <div class="flex pt-34  ">
        <div class="w-180 h-60 lh-60 text-center rounded tabBackground textColor">{{ $t('全仓') }} </div>
        <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
          <div @click="showOptions = !showOptions" style="height:100%; box-sizing: border-box"
            class="relative word-30 pl-28 pr-10 w-140 h-60 tabBackground select-wrap flex justify-between items-center">
            {{ form.lever_rate }}x <img src="../../../assets/image/public/grey-select.png" alt="select-icon"
              class="w-22 h-11" />
            <div v-if="showOptions" class="options tabBackground w-140 absolute top-97 left-0 z-10">
              <div class="w-full" @click.stop="handleChoose(item)"
                :class="{ 'option-active': form.lever_rate === item.lever_rate }" :value="item.lever_rate"
                v-for="item in initData.lever" :key="item.id">
                {{ item.lever_rate }}x
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-30 pb-20">
        <div class="flex">
          <div class="w-440 flex flex-col">
            <template v-if="selectIndex == 1">
              <div class="flex items-center h-66 rounded-lg text-grey">
                <p class="font-28 flex-1 flex items-center justify-center h-66 "
                  :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
                  {{ $t("开多") }}
                </p>
                <p class="font-28 flex-1 flex items-center justify-center h-66"
                  :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
                  {{ $t("开空") }}
                </p>
              </div>
              <div class="mt-22 mb-30" style="position:relative;">
                <div class="greyBg flex justify-between items-center w-full h-76 rounded-lg textColor" @click="selectBtn">
                  <img src="../../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 ml-20" />
                  <div class="text-center" style="width:80%;">{{ title }}</div>
                  <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20" />
                </div>
                <div class="option-box" v-show="isShow">
                  <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title
                  }}</div>
                </div>
              </div>
            </template>
            <contract-futrue v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'" class="mb-20"
              :initFutrue="initFutrue" @paraId="onParaId" />
            <div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center rounded-lg textColor" v-if="selectIndex == 1">
              <input placeholder="" class="greyBg w-full pl-20  h-76 border-none text-left rounded-lg"
                :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
              <span class="ml-20">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
            </div>

            <div class="w-440 flex items-center greyBg h-76 lh-76 rounded-lg" v-if="initFutrue">
              <div v-if="selectIndex == 1 && initFutrue.para && initFutrue.para.length > 0"
                class="w-80 flex items-center justify-center" style="height:100%;" @click="onReduce">
                <img src="../../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
              </div>
              <input v-if="selectIndex == 1" :placeholder="$t('张数')" class="border-none greyBg text-center textColor"
                style="width: 156px;" v-model="form.amount" type="number" @input="onInput" />
              <input v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'"
                :placeholder="($t('最少') + initFutrue && initFutrue.para ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : '')"
                class="border-none greyBg text-center textColor" style="width: 156px;" v-model="form.amount" type="number"
                @input="onInput" />
              <div class="w-80 flex items-center justify-center" style="height:100%;">
                <template v-if="selectIndex == 1">
                  <img @click="onAdd" src="../../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
                </template>
                <template v-else>
                  <span class="textColor">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
                </template>
              </div>
            </div>
            <template v-if="selectIndex == 1">
              <div class="mt-40 mb-30 w-full flex justify-between items-center">
                <span class="font-22 font-400 text-grey">{{ $t("可开张数") }}</span>
                <span class="font-22 font-400 textColor">
                  {{ initData.volume }}
                  {{ $t("张") }}
                </span>
              </div>
              <!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
              <!-- <vue-slider class="mainBox" v-bind="options" :marks="marks" v-model="form.volume" :hide-label="true"  width="90%"
              :railStyle="{ background: '#404040', height: '4px' }"
              :processStyle="{ background: '#266BFF', height: '4px' }">
              <template v-slot:step="{ active }">
                <div :class="['custom-step', { active }]"></div>
              </template>
            </vue-slider>
            <div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center">
              <span class="flex-1 text-left">0%</span>
              <span class="flex-1 text-left">25%</span>
              <span class="flex-1 text-center">50%</span>
              <span class="flex-1 text-right">75%</span>
              <span class="flex-1 text-right">100%</span>
            </div> -->
              <!-- 张数输入 -->
              <amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()" @getAmount="getAmount"></amount-slider>
            </template>
            <template v-if="selectIndex == 1 && userInfo.token">
              <div class="flex justify-between mt-30">
                <div class="text-grey">{{ $t('合约金额') }}</div>
                <div class="textColor">{{ initData.amount * (form.amount / 1) * form.lever_rate }}
                  <span>{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
                </div>
              </div>
              <div class="flex justify-between mt-30">
                <div class="text-grey">{{ $t("保证金") }}</div>
                <div class="textColor">
                  {{ (initData.amount * (form.amount / 1)) }} {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
                </div>
              </div>
              <div class="flex justify-between mt-30">
                <div class="text-grey">{{ $t("建仓手续费") }}</div>
                <div class="textColor">{{ userInfo.perpetual_contracts_status === '1' ? initData.fee *
                  (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate }} {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
                </div>
              </div>
            </template>

            <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
              <div>{{ $t("可用USDT") }}</div>
              <div class="textColor">{{ initFutrue.amount }} {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</div>
            </div>
            <div class="flex font-24 text-grey justify-between mt-20"
              v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
              <div>{{ $t("手续费") }}</div>
              <div class="textColor">
                {{
                  (
                    form.amount *
                    (initFutrue && initFutrue.para
                      ? initData.para[paraIndex].unit_fee
                      : "")
                  ).toFixed(2)
                }}
                {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
              </div>
            </div>

            <template v-if="userInfo.token">
              <template v-if="selectIndex == 1">
                <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-70" v-if="currentType == 'long'"
                  @click="order('long')">
                  <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                    {{ $t('开多') }}
                    <span class="right-word font-22 text-center">{{
                      $t("看涨")
                    }}</span>
                  </div>
                  <div class="font-34 relative text-center" style="flex-grow:1;" v-else>
                    {{ $t('做多买入') }}
                  </div>
                </div>
                <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-70" v-if="currentType == 'short'"
                  @click="order('short')">
                  <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                    {{ $t('开空') }}
                    <span class="right-word font-22 text-center">{{
                      $t("看跌")
                    }}</span>
                  </div>
                  <div class="relative font-34 text-center" style="flex-grow:1;" v-else>
                    {{ $t('做空买入') }}
                  </div>
                </div>
              </template>
              <template v-if="selectIndex == 2">
                <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-10 " @click="order('open')"
                  v-if="userInfo.token">
                  <div class="font-34 relative text-center" style="flex-grow: 1">
                    {{ $t("开多") }}
                    <span class="right-word font-22 text-center">{{
                      $t("看涨")
                    }}</span>
                  </div>
                </div>
                <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" style="position: relative;"
                  :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token">
                  <div class="relative font-34 text-center" style="flex-grow: 1">
                    {{ $t("开空") }}
                    <span class="right-word font-22 text-center">{{
                      $t("看跌")
                    }}</span>
                  </div>
                </div>
              </template>
            </template>
            <div v-else class="w-full mt-120">
              <div class="textColor">
                <p>{{ $t('套期保值，风险对冲') }}</p>
                <p class="pt-8">{{ $t('登陆后继续') }}</p>
              </div>
              <div class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50"
                @click="$router.push('/login')">{{ $t('logIn') }}</div>
            </div>
          </div>
          <!-- 右侧数据部分 -->
          <div class="ml-30">
            <div class="w-290 flex justify-between text-grey font-22">
              <div>
                <div>{{ $t("价格") }}</div>
                <div class="mt-4">{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
              </div>
              <div class="text-right items-end justify-end">
                <div class="">{{ $t("数量") }}</div>
                <div class="mt-4">{{ queryType === 'cryptos' ?
                  `(${symbol_data.toUpperCase() || "--"})` : '(USD)' }}</div>
              </div>
            </div>
            <div class="deep-div">
              <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1  font-26"
                v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
                  background:
                    `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
                    } 0%` +
                    (1 - item.amount / greenData[greenData.length - 1].amount) *
                    100 +
                    '%,rgba(246,70,93,.1) ' +
                    (1 - item.amount / greenData[greenData.length - 1].amount) *
                    100 +
                    '%,rgba(246,70,93,.1) 100%)',
                }">
                <div class="text-red">{{ item.price }}</div>
                <div class="text-right textColor" v-if="symbol == 'shib'">
                  {{ fixDate(item.amount, $i18n) || "--" }}
                </div>
                <div class="text-right textColor" v-else>
                  {{ item.amount || "--" }}
                </div>
              </div>
            </div>
            <div class="w-290 text-red pt-5 font-34 font-700 text-center">
              {{ price || '--' }}
            </div>
            <div class="pb-5 font-20 text-center">
              ≈ {{ ((price *
                currency.rate).toFixed(price.toString().split('.')[1] ?
                  price.toString().split('.')[1].length : 2)) || '--' }}
            </div>
            <div class="deep-div">


              <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
                v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
                  background:
                    `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
                    } 0%` +
                    (1 - item.amount / greenData[greenData.length - 1].amount) *
                    100 +
                    '%,rgba(94,186,137,.1) ' +
                    (1 - item.amount / greenData[greenData.length - 1].amount) *
                    100 +
                    '%,rgba(94,186,137,.1) 100%)',
                }">
                <div class="text-green">{{ item.price }}</div>
                <div class="text-right textColor" v-if="symbol_data == 'shib'">
                  {{ fixDate(item.amount, $i18n) || "--" }}
                </div>
                <div class="text-right textColor" v-else>
                  {{ item.amount || "--" }}
                </div>
              </div>
            </div>
            <div class="flex k-select-box">
              <div class="mt-22 mb-22 select-box" style="position: relative">
                <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
                  <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
                  <div class="pl-16 font-28 textColor" style="width: 80%">
                    {{ dataArrTitle }}
                  </div>
                  <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-10" />
                </div>
                <div class="option-box" v-show="arryIsShow">
                  <div class="font-28" v-for="(item, index) in selectDataArry" :key="index" @click="selectItemArry(item)">
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div @click="isSelectShow = true">
                <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30 ml-10" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model:show="show" class="rounded-2xl">
        <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
          @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
      </van-popup>
      <van-action-sheet v-model:show="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
        close-on-click-action @cancel="onCancel">
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import config from "@/config";
import { Popup, showToast } from 'vant';
import { mapGetters } from 'vuex'
import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.js'
import 'vue-slider-component/theme/default.css'
import { _orderOpen, _futrueOrder, _futrueOrderDetail, _getBalance, _futrueOrderInit } from '@/service/trade.api'
import ContractFutrue from '@/components/Transform/contract-futrue/index.vue'
import PopupDelivery from "@/components/Transform/popup-delivery/index.vue";
import { fixDate } from "@/utils/index.js";
import { THEME } from '@/config/theme'
import AmountSlider from "./amountSlider.vue";
import "vue-slider-component/theme/default.css";
import { _getHomeList } from "@/service/home.api";
export default {
  name: "perpetualPosition",
  components: {
    VueSlider,
    ContractFutrue,
    PopupDelivery,
    AmountSlider,
    [Popup.name]: Popup,
  },
  props: {
    greenData: { // 买单
      type: Array,
      default() {
        return []
      }
    },
    redData: { // 卖单
      type: Array,
      default() {
        return []
      }
    },
    symbol: {
      type: String,
      default: ''
    },
    price: {
      type: [Number, String],
      default: '0.00'
    },
    initOpen: {
      type: Object,
      default() {
        return {}
      }
    },
    initClose: {
      type: Object,
      default() {
        return {}
      }
    },
    initFutrue: {
      type: Object,
      default() {
        return {}
      }
    },
    selectIndex: {
      type: [String, Number],
      default: 1
    },
    currentType: {
      type: String,
      default: "long",
    },
  },
  watch: {
    price(val) {
      if (this.type === '1') { // !this.focus &&
        this.form.price = val
      }
      if (JSON.stringify(this.initFutrue.para) != '[]') {
        this.form.para_id = this.initFutrue.para && this.initFutrue.para[this.paraIndex].para_id // 不优雅，不可靠
      }

    },
    initOpen: { // 处理滚动条初始值
      deep: true,
      handler(val) {
        this.handleInitSliderOption()
      }
    },
    initClose: { // 处理滚动条初始值
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.amount / 1 > 0) {
          this.handleInitSliderOption(true)
        }
      }
    },
    greenData(val) {
      if (this.dataArrValue >= 1) {
        this.greenData.map((item) => {
          item.price = parseFloat(item.price).toFixed(this.dataArrValue);
        });
        this.redData.map((item) => {
          item.price = parseFloat(item.price).toFixed(this.dataArrValue);
        });
      } else {
        if (this.dataArrValue == -1) {
          this.greenData.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf("."));
          });
          this.redData.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf("."));
          });
        }
        if (this.dataArrValue == -2) {
          this.greenData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 1) + "0";
          });
          this.redData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 1) + "0";
          });
        }
        if (this.dataArrValue == -3) {
          this.greenData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 2) + "00";
          });
          this.redData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 2) + "00";
          });
        }
      }
    },
    symbol(val) {
      // this.getHomeList(val);
    },
    '$route'(val) {
      this.getHomeList(val.params.symbol);
    },
    initData(val) {
      if (val.lever.length > 0) {
        val.lever = val.lever.sort(this.orderListAsc('lever_rate'))
      }

    }
  },
  computed: {
    ...mapGetters('user', ['userInfo']),
    ...mapGetters('home', ['currency']),
    initData() {
      let obj = null
      if (this.selectIndex / 1 === 1) {

        obj = this.initOpen
        if (!obj.lever || !obj.lever.length) { // 倍数
          obj.lever = [{ id: 1, lever_rate: 1 }]
        }
        return obj
      }
      return this.initFutrue
    },
    coudBuyVolume() { // 可买数量
      return Math.floor((this.initOpen.volume / 1) / this.form.lever_rate)
    }
  },
  data() {
    return {
      THEME,
      fixDate,
      currentBuyType: '', // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
      timeout2: null,
      timeout: null,
      detailData: {}, // 交割合约订单详情数据
      show: false,
      popType: 'confirm', // 弹框类型 confirm / counting
      showOptions: false,
      options: config.sliderOptions,
      value: 0,
      isShow: false,
      title: this.$t('市价'),
      paraIndex: 0,
      selectData: [
        { title: this.$t('市价'), type: '1' },
        { title: this.$t('限价'), type: '2' },
      ],
      form: {
        symbol: '', // 币种
        session_token: '',
        direction: 'buy', // 买or卖
        price_type: 'opponent', // 市价or限价
        lever_rate: 1, // 杠杆
        price: '',
        amount: '', // 数量
        para_id: '' // 交割周琦id
      },
      focus: false,
      type: "1",//选中市价或限价类型
      // action: _orderOpen // 开仓or
      isShow: false,
      selectDataArry: [],
      isSelectShow: false,
      actions: [
        { name: this.$t("默认"), value: 0, className: 'actions-active' },
        { name: this.$t("展示买单"), value: 1, className: '' },
        { name: this.$t("展示卖单"), value: 2, className: '' },
      ],
      showType: 0,
      dataArrTitle: 0,
      dataArrValue: 0,
      arryIsShow: false,
      marks: (val) => val % 50 === 0,
      symbol_data: '',
      queryType: 'cryptos',
    }
  },
  created() {
    // console.log('>>>>>>>>>>>>')
    if (this.$route.query.type) {
      this.queryType = this.$route.query.type
    }
  },
  activated() {
    this.selectData = [
      { title: this.$t('市价'), type: '1' },
      { title: this.$t('限价'), type: '2' },
    ]
    this.title = this.$t('市价');
  },
  mounted() {
    this.getHomeList(this.$route.params.symbol);
    this.form.price = this.price
  },
  beforeUnmount() {
    this.clearTimeout()
  },
  methods: {
    //获取张数
    getAmount(val) {
      if (!val) {
        val = ''
      }
      this.form.amount = val;
    },
    onSelect(item) {
      this.actions.map((item) => {
        item.className = ''
      })
      item.className = 'actions-active'
      this.showType = item.value;
      this.$emit("changeValueBack", this.showType);
    },
    // 获取张数,数据转换
    getVolumnByLever() {
      let vol;
      vol = this.initOpen.volume / 1;
      return Math.floor(vol);
    },
    selectItemArry(item) {
      this.dataArrValue = item.value;
      this.arryIsShow = false;
      this.dataArrTitle = item.name;
    },
    onCancel() {
      this.isSelectShow = false;
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    selectArryBtn() {
      this.arryIsShow = !this.arryIsShow;
    },
    getHomeList(symbol) {
      _getHomeList(symbol).then((res) => {
        this.symbol_data = res[0].symbol_data
        let numberText = res[0].close.toString();
        let numberLength = numberText.substring(numberText.indexOf(".") + 1, numberText.length).length;
        let arry = [];
        let str = "0.";
        for (let j = 0; j < numberLength - 1; j++) {
          str = str + "0";
          arry.push(str);
        }
        let newArry = [];
        arry.map((item) => {
          let obj = {
            name: item + "1",
            value:
              item.substring(item.indexOf(".") + 1, item.length).length + 1,
          };
          newArry.push(obj);
        });
        if (numberLength <= 2) {
          let obj = [
            {
              name: "0.1",
              value: 1,
            },
            {
              name: "1",
              value: -1,
            },
            {
              name: "10",
              value: -2,
            },
            // {
            //   name: '100',
            //   value: -3,
            // }
          ];
          let arryItem = {
            name: "100",
            value: -3,
          };
          if (numberText.substring(0, numberText.indexOf(".")).length > 2) {
            obj.push(arryItem);
          }
          newArry = newArry.concat(obj);
        }
        if (this.symbol == "shib") {
          newArry = newArry.slice(-4);
        }
        let dataObj = {
          arry: newArry,
          numberLength: numberLength,
        };
        this.selectDataArry = dataObj.arry;
        if (numberLength >= 2) {
          this.dataArrTitle = this.selectDataArry[0].name;
        } else {
          this.dataArrTitle = this.selectDataArry[this.selectDataArry.length - 1].name;
        }
      });
    },
    continueTobuy(detailData) {
      this.show = false
      setTimeout(() => {
        this.$router.push(`/trendDetails/${detailData.symbol}?direction=${detailData.direction}`)
      }, 300);
    },
    onQuickPrice(price) { // 点击金额变化
      if (this.type === '2') {
        this.form.price = price
      }
    },
    clearTimeout() {
      clearTimeout(this.timeout)
      this.timeout = null
    },
    handleTimeEnd(order) {
      if (this.selectIndex / 1 === 2) { // 交割合约需要弹出详情框
        _futrueOrderDetail(order).then(data => {
          this.clearTimeout()
          this.detailData = data
          if (data.state !== 'created') {
            this.timeout = setTimeout(() => {
              this.handleTimeEnd(order)
            }, 1000)
          }
        })
      }
    },
    handleInitSliderOption(amount) {
      if (!amount) {
        // 金额是否需要变动
        this.form.amount = "";
      }
      console.log(this.initOpen.volume, this.form.lever_rate);
      let vol;
      vol = this.initOpen.volume / 1;
      this.options.max = Math.floor(vol);
      console.log("this.options.max", this.options.max);
      if (this.options.max > 0) {
        this.options.disabled = false;
      } else {
        this.options.disabled = true;
      }
    },
    handleChoose(item) {
      this.showOptions = !this.showOptions
      this.form.lever_rate = item.lever_rate
      console.log('handleChoose')
      this.handleInitSliderOption()
    },
    onAdd() { // +
      if (this.options.max === 0) {
        return
      }
      if (this.form.amount === this.options.max) {
        return;
      }
      this.form.amount++
    },
    onReduce() { // -
      if (this.form.amount > 1) {
        this.form.amount--
      }
    },
    onParaId(evt) { // 交割日期
      this.form.para_id = evt.id
      this.paraIndex = evt.index
      this.form.price = ''
      this.form.amount = ''
    },
    onInput() { // 数量变化
      // console.log(1111111, this.form.amount, this.selectIndex)
      if (this.selectIndex == 1 && this.options.max == 0) {
        this.form.amount = this.form.amount / 1
      } else if (this.selectIndex == 1 && this.form.amount / 1 > this.options.max / 1) {
        this.form.amount = this.options.max / 1
      }
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    //选择价格类型
    selectItem(item) {
      if (item.type == 1) {
        this.form.price = this.price
      }
      this.form.price_type = item.type === '1' ? 'opponent' : 'limit'
      this.title = item.title;
      this.type = item.type;
      this.form.price = this.price
      this.isShow = false;
    },
    //选择开仓类型
    changeTab(type) {
      // 开仓和
      console.log("changeTab", type);

      if (this.currentType === type) {
        return;
      }
      this.$emit("changeCurrentType", type);
      // this.currentType = type;

      this.$refs.sliderRef.emptyValue()
      this.handleInitSliderOption();
    },
    onClose() { // 关闭
      this.show = false
      setTimeout(() => {
        this.popType = 'confirm'
      }, 500)
    },
    // onOrderConfirm() { /// 交割合约确认
    //   this.show = false
    //   this.popType = 'counting'
    //   this.order(this.form.direction === 'buy' ? 'open' : 'close')
    // },
    order(type) {
      if (!this.userInfo.token) {
        this.$router.push('/login')
        return false;
      }
      if (this.selectIndex == 1) {
        if (!this.form.price) {
          showToast(this.$t('请输入金额'))
          return
        }
      }
      if (!this.form.amount) {
        if (this.selectIndex == 1) {
          showToast(this.$t('请输入合约张数'))
        } else {
          showToast(this.$t('请输入金额'))
        }
        return
      }


      // this.form.direction = type
      this.form.symbol = this.$route.params.symbol
      // this.form.direction = type === 'open' ? 'buy' : 'sell'
      if (type == 'long' || type == 'open') {
        this.form.direction = 'buy'
      } else {
        this.form.direction = 'sell'
      }
      let _order = null // api
      let emitFunc = null // 触发函数
      if (this.selectIndex / 1 === 1) { // 永续合约
        // 永续合约
        this.form.session_token = this.initOpen.session_token
        _order = _orderOpen
        emitFunc = this.currentType
        this.openOrder(_order, emitFunc);
      } else { // 交割合约
        this.form.session_token = this.initFutrue.session_token
        _order = _futrueOrder
        emitFunc = 'futrue'

        if (this.initFutrue.session_token == undefined || this.initFutrue.session_token == '') {
          _futrueOrderInit(this.symbol).then(data => {
            this.form.session_token = data.session_token;
            this.openOrder(_order, emitFunc);
          }).catch((err) => {
            if (err.code == 'ECONNABORTED') { showToast(this.$t('网络超时！')); }
            else if (err.msg != undefined) { showToast(this.$t(err.msg)); }
          });
        }
        else {
          this.form.session_token = this.initFutrue.session_token;
          this.openOrder(_order, emitFunc);
        }
      }
    },
    openOrder(_order, emitFunc) {
      _order(this.form).then((res) => {
        showToast(this.$t('操作成功'))
        if (this.selectIndex / 1 === 1) {
          this.$refs.sliderRef.emptyValue()
        }
        this.$emit('ordered', emitFunc)
        _getBalance().then(data => { // 刷新余额
          this.$store.commit('user/SET_USERINFO', { balance: data.money })
        })

        if (this.selectIndex / 1 === 2) { // 交割合约需要弹出详情框
          _futrueOrderDetail(res.order_no).then(data => {
            this.detailData = data
            this.show = true
          })
        }

      }).catch(() => { // 也需要重新初始化
        this.$emit('ordered', emitFunc)
        if (this.selectIndex / 1 === 1) {
          this.$refs.sliderRef.emptyValue()
        }
      })
    },
    //数字排序
    orderListAsc(filed, type = "asc"){
      return (a, b) => {
        if (type == "asc") return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
        return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
      };
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/init.scss";

#cryptos {
  .perpetual-open {
    font-size: 26px;
  }

  .options {
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
    border-radius: 6px;

    div {
      font-size: 22px;
      text-align: center;
      width: 140px;
      height: 50px;
      line-height: 50px;

      &.option-active {
        background-color: $tab_background;
      }
    }
  }

  .right-word {
    top: 50%;
    transform: translateY(-50%);
    right: 19px;
    position: absolute;
    border-radius: 6px;
  }

  .vue-slider {
    height: 3px !important;
    padding: 0 20px !important;
  }

  .vue-slider-dot {
    width: 32px !important;
    height: 32px !important;

  }

  .vue-slider-mark-label {
    font-size: 16px;
    margin-top: 14px !important;
  }

  .vue-slider-mark-label-active {
    color: $text_color1 !important;
  }

  .vue-slider-dot-handle {
    border: 3px solid $btn_main;
  }

  .vue-slider-mark {
    width: 20px !important;
    height: 20px !important;

    &:nth-child(1) {
      .vue-slider-mark-label {
        transform: translateX(-14px) !important;
      }
    }

    &:nth-child(5) {
      .vue-slider-mark-label {
        transform: translateX(-60px) !important;
      }
    }
  }

  // 开仓样式
  .tabcon {
    // padding-bottom: 16%;
    position: relative;
    height: 80px;
  }

  .tab {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    background-color: $border-grey;
    border-radius: 5px;
    overflow: hidden;
  }

  .tab>* {
    height: 100%;
  }

  .tab>img {
    margin-left: -2px;
    margin-right: -2px;
  }

  .tab>a {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .open {
    background-color: $green;
    color: white;
  }

  // 下拉
  .option-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    width: 100%;
    background-color: $grey_bg;
    text-align: center;
    box-shadow: 0px 0px 3px 3px $grey_bg;
    border-radius: 4px;
    color: $text-color;
    z-index: 10;

  }

  .option-box>div {
    padding: 10px 0;

  }

  .option-box>div:hover {
    background-color: $grey_bg;
  }

  .num-text-color {
    color: #4C4A54;
  }

  select {
    appearance: none;
    /* 去掉默认图标 */
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    padding: 0 20px 0 20px;
    background: url("../../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
    /* 自己的图*/
    background-size: 20px 11px;
  }

  .with100 {
    width: 100%;
  }

  .height100 {
    height: 100%;
  }

  .long {
    background-color: $green;
    background: url(@/assets/image/public/open-bg.png) no-repeat right center;
    background-size: 100% 100%;
    color: white;
  }

  .short {
    background-color: $green;
    background: url(@/assets/image/public/close-bg.png) no-repeat left center;
    background-size: 100% 100%;
    color: white;
  }

  .van-action-sheet__content {
    background: transparent;

    .van-action-sheet__item {
      background: transparent !important;
      color: $text_color;
    }
  }

  .van-action-sheet__gap {
    background: transparent;
  }

  .van-action-sheet__cancel {
    background: transparent;
  }
}

.k-select-box {
  justify-content: flex-end;
  // padding-right: 40px;
  align-items: center;

  .select-box {
    width: 220px;

    background: #1E1E1E;

    margin-right: 20px;
  }
}

.deep-div {
  min-height: 370px;
}
</style>
